<template>
  <div>
    <el-row>
      <el-col :span=9>
        <!--基准利率-->
        <el-input-number v-model="itemAttr.value[0]" controls-position="right"
                         :precision="itemAttr.precision==='undefined'?'0.01':itemAttr.precision"
                         :step="typeof(itemAttr.step)==='undefined'?'0.01':itemAttr.step" clearable
                         style="width:90px">
        </el-input-number>
        %
      </el-col>
      <el-col :span=8>
        <!---上浮比例-->
        <el-select v-model="itemAttr.value[1]" :multiple="itemAttr.multiple" clearable
                   style="width:80px" @change="rateChange">
          <el-option
            key="#"
            label="无"
            value="#">
          </el-option>
          <el-option
            v-for="rItem in itemAttr.childs.uploadRate.options"
            :key="rItem.id"
            :label="rItem.name"
            :value="rItem.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span=7>
        <!--实际利率-->
        <el-input v-model="itemAttr.value[2]"
                  style="width:60px" disabled></el-input>
        %
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss">

</style>

<script>
  export default {
    name: 'LemonERate',
    props: {
      width: String,
      itemAttr: Object
    },
    data() {
      return {}
    },
    methods: {
      rateChange(val) {
        this.itemAttr.value[2] = parseInt((this.itemAttr.value[0] * (1 + this.changePercentToPoint(val))) * 1000) / 1000
      },
      changePercentToPoint(percent) {
        var str = percent.replace('%', '')
        str = str / 100
        return str
      }
    }
  }
</script>
